import React, { useEffect, useMemo, useRef } from 'react'
import { Header } from 'src/components'
import showdown from 'showdown'
import BScroll from 'better-scroll'
import { useSelector } from 'react-redux'
import './index.scss'

const Answer = () => {
    
    const { question } = useSelector(state => state)
    const scorllRef = useRef()

    useEffect(() => {
        new BScroll(scorllRef.current, {
            deceleration: 0.001,
            bounce: true,
            swipeTime: 1800,
            onclick: true,
        })
    }, [])

    const markdownText = useMemo(() => {
        //转换markDown格式
        let converter = new showdown.Converter();
        return converter.makeHtml(question.detail);
    }, [question.detail])

    return <div className="page_service_answer">
        <Header title={question.title} goBack></Header>
        <section ref={scorllRef} className="scroll_container">
            <section dangerouslySetInnerHTML={{ __html: markdownText }} className="markdown"></section>
        </section>
    </div>
}

export default Answer